<template>
    <div class="message">
      <p>{{content}}</p>
      <el-button @click="click" type="text" v-if="content.indexOf(characteristic)>-1">退出该群</el-button>
    </div>   
</template>
<script>
export default {
  name: 'systemMessage',
  data(){
      return {
        // characteristic : '加入了群聊'
        characteristic : '群已被限制使用'
      }
  },
  props:{
    data:{}    
  },
  computed:{
    
    content(){
      let messge = this.data
      if(typeof this.data === 'string'){
        try {
          messge = JSON.parse(this.data)    
        } catch (error) {
          messge = {content:this.data}
        }
      }

      const content = messge.content.replace(/\<\!\[CDATA\[([^\]]+)\]\]\>/gi,(a,b)=>b)   
      let a = document.createElement('div')
      a.innerHTML = content
      return a.innerText   
    }

  },
  methods:{
    click(){
      this.$emit('quit')
    }
  },
  created(){
  }  
}
</script>
<style scoped>
.message{
    color: #b2b2b2;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
    padding: 20px 0;
    text-shadow: 1px 1px #fff;
}
</style>